<template>
  <div>
    <!--  大图  -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content-banner bg-img">
          <div class="team-bg-content">
            <el-row>
              <el-col :span="12">
                <div class="grid-content-banner-img bg-purple">
                  <div class="team-bg-content-img-box">
                    <img class="team-bg-content-img" src="../assets/img/teamMark.png" alt="">
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content-banner-text bg-purple-light">
                  <div class="team-bg-content-text-box">
                    <h1>team</h1>
                    <h3>team descripe</h3>
                    <br>
                    <span style="color: white">战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--  admin个人信息操作  -->
    <div v-if="flag">
      <h2 class="title">用户信息浏览</h2>
      <br>
      <hr>
      <br>
      <!--   登录状态展示   -->
      <div>
        <el-row>
          <el-col :span="4">
            <p v-if="userInfo !== {}">已登录：{{ userInfo.userName }}</p>
            <p v-else>未登录，请先登录</p>
          </el-col>
        </el-row>
      </div>
      <!--   表格展示所有user   -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="userId"
          label="userId">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="userName">
        </el-table-column>
        <el-table-column
          prop="userPassword"
          label="userPassword">
        </el-table-column>
        <el-table-column
          prop="userPower"
          label="userPower">
        </el-table-column>
        <el-table-column
          prop="userStatus"
          label="userStatus">
        </el-table-column>
        <!--   update     -->
        <el-table-column label="更改用户信息">
          <template slot-scope="scope">
            <el-button
              @click="handleUserUpdate(scope.$index, scope.row)"
              round
              size="mini"
              icon="el-icon-edit"
              type="success"
              style="margin-left: 16px;">
              更改用户信息
            </el-button>
          </template>
        </el-table-column>
        <!--   delete     -->
        <el-table-column label="删除用户信息">
          <template slot-scope="scope">
            <el-button
              @click="handleUserDel(scope.$index, scope.row)"
              round
              size="mini"
              icon="el-icon-delete"
              type="danger"
              style="margin-left: 16px;">
              删除用户信息
            </el-button>
          </template>
        </el-table-column>
        <!--   kill     -->
        <el-table-column label="封号">
          <template slot-scope="scope">
            <el-button
              @click="handleUserKill(scope.$index, scope.row)"
              round
              size="mini"
              icon="el-icon-star-off"
              type="info"
              style="margin-left: 16px;">
              封号
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   添加   -->
      <div id="user-add">
        <el-button
          round
          @click="changeInfo()"
          icon="el-icon-plus"
          type="warning">
          增加用户
        </el-button>
      </div>

    </div>
    <!--  drawer  -->
    <div>
      <!--   添加   -->
      <el-drawer
        title="我是标题"
        :visible.sync="drawer1"
        :with-header="false">
        <div class="add-team">
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="userName">
              <el-input v-model="formLabelAlign.userName"></el-input>
            </el-form-item>
            <el-form-item label="userPassword">
              <el-input v-model="formLabelAlign.userPassword"></el-input>
            </el-form-item>
            <el-form-item label="userPower">
              <el-input v-model.number="formLabelAlign.userPower"></el-input>
            </el-form-item>
            <el-form-item label="userStatus">
              <el-input v-model.number="formLabelAlign.userStatus"></el-input>
            </el-form-item>
          </el-form>
          <button class="btn" @click="func2()">确认添加</button>
        </div>
      </el-drawer>
      <!--   更新   -->
      <el-drawer
        title="我是标题"
        :visible.sync="drawer2"
        :with-header="false">
        <div class="add-team">
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="userId">
              <el-input v-model="formLabelAlign.userId"></el-input>
            </el-form-item>
            <el-form-item label="userName">
              <el-input v-model="formLabelAlign.userName"></el-input>
            </el-form-item>
            <el-form-item label="userPassword">
              <el-input v-model="formLabelAlign.userPassword"></el-input>
            </el-form-item>
            <el-form-item label="userPower">
              <el-input v-model.number="formLabelAlign.userPower"></el-input>
            </el-form-item>
            <el-form-item label="userStatus">
              <el-input v-model.number="formLabelAlign.userStatus"></el-input>
            </el-form-item>
          </el-form>
          <button class="btn" @click="handleUpdateUserConfirm()">确认添加</button>
        </div>
      </el-drawer>
    </div>
    <!--  !admin操作  -->
    <div v-if="!flag">
      <h2 class="title">用户信息浏览</h2>
      <br>
      <hr>
      <br>

      <!--   修改密码 查看登录状态   -->
      <div class="box">
        <el-row>
          <el-col :span="4">
            <p v-if="userInfo !== {}">已登录：{{ userInfo.userName }}</p>
            <p v-else>未登录，请先登录</p>
          </el-col>
        </el-row>
        <br>
        <el-button
          @click="handleUserUpPassword()"
          round
          size="large"
          icon="el-icon-edit"
          type="success"
          style="margin-left: 16px;">
          更改密码
        </el-button>
        <!--   更新   -->
        <el-drawer
          title="我是标题"
          :visible.sync="drawer3"
          :with-header="false">
          <div class="add-team">
            <div style="margin: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <el-form-item label="userName">
                <el-input v-model="formLabelAlign.userName"></el-input>
              </el-form-item>
              <el-form-item label="userPassword">
                <el-input v-model="formLabelAlign.userPassword"></el-input>
              </el-form-item>
            </el-form>
            <button class="btn" @click="handleUpPasswordConfirm()">确认添加</button>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from "../network/request";
import axios from "axios";

export default {
  name: "PersonalInformation",
  data() {
    return {
      flag: true,
      labelPosition: 'right',
      drawer1: false,
      drawer2: false,
      drawer3: false,
      userInfo: {},
      formLabelAlign: {
        userId: 0,
        userName: "",
        userPassword: "",
        userPower: 0,
        userStatus: 0
      },
      tableData: []
    }
  },
  methods: {
    changeInfo() {
      this.drawer1 = true;
    },
    func2() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/user/save', json)
        .then(res => {
          location.reload()
        })
        .catch(Error => {

        })
    },
    // 更新user信息button
    handleUserUpdate(index, row) {
      this.drawer2 = true
      this.formLabelAlign.userId = row.userId
      this.formLabelAlign.userName = row.userName
      this.formLabelAlign.userPassword = row.userPassword
      this.formLabelAlign.userPower = row.userPower
      this.formLabelAlign.userStatus = row.userStatus
    },
    // 删除user信息button
    handleUserDel(index, row) {
      this.formLabelAlign.userId = row.userId
      this.handleDelUserConfirm()
    },
    // 确认更新user信息
    handleUpdateUserConfirm() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/user/update', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 确认删除user信息
    handleDelUserConfirm() {
      const arr = [
        this.formLabelAlign.userId
      ]
      axios.post('http://localhost:8081/teams/user/delete', arr)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 封号
    handleUserKill(index, row) {
      request({
        url: '/user/kill/' + row.userId
      }).then(res => {
        location.reload()
      }).catch(err => {
        console.log(err)
      })
    },
    // ！admin修改密码button
    handleUserUpPassword() {
      this.drawer3 = true
      this.formLabelAlign.userId = this.userInfo.userId
      this.formLabelAlign.userName = this.userInfo.userName
      this.formLabelAlign.userPassword = this.userInfo.userPassword
      this.formLabelAlign.userPower = this.userInfo.userPower
      this.formLabelAlign.userStatus = this.userInfo.userStatus
    },
    // !admin确认修改密码
    handleUpPasswordConfirm() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/user/update', json)
        .then(res => {
          location.reload();
        })
        .catch(Error => {

        })
    },
    // 判断权限
    JudgePower() {
      if (this.$store.state.userPower == 0) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
  },
  created() {
    this.JudgePower()

    request({
      url: '/user/info/' + this.$store.state.userId
    }).then(res => {
      console.log(res)
      this.userInfo = res.user;
    }).catch(err => {
      console.log(err)
    })
    //  user列表
    request({
      url: '/user/list'
    }).then(res => {
      this.tableData = res.page.list
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>

.btn {
  display: block;
  margin-left: 10%;
}


.grid-content-banner {
  border-radius: 4px;
  height: 521px;
}

.grid-content-banner {
  border-radius: 4px;
  height: 521px;
}

.grid-content-banner-img {
  width: 100%;
  height: 521px;
  margin: 0 auto;
}

.team-bg-content-img-box {
  width: 70%;
  height: 70%;
  padding: 12%;
  margin: 0 auto;
}

.team-bg-content-img {
  width: 100%;
  height: 100%;
}

.grid-content-banner-text {
}

.bg-img {
  background-image: url("../assets/img/team_banner-bg.jpg");
}

.team-bg-content {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  color: white;
}

.team-bg-content-text-box {
  width: 80%;
  height: 70%;
  margin: 22% auto;
}

span {
  color: black;
}

.bg-purple {
  background-color: #d3dce6;
}

.bg-purple-light {
/ / border: 1 px solid #d3dce6;
}

.title {
  margin-top: 3%;
  margin-left: 2%;
}

#user-add {
  float: right;
  margin-top: 1%;
  margin-right: 4%;
}
.box {
  margin-left: 10%;
}

.el-input {
  width: 60%;
  margin-left: 20%;
}
</style>
